<template>
	<div id="detalis">
		<div class="header">
			<div>
				<van-icon name="arrow-left" size="20px" @click='getfanh' />
			</div>
			<div>商品详情</div>
			<div>
				<van-icon name="share-o" size="19px" />
			</div>
		</div>
		<div class="van-swipe">
			<img :src="image" />
		</div>
		<!-- 规格介绍 -->
		<div class="de-guige">
			<div class="de-biaoti">{{title}}</div>
			<div class="de-jiage">￥{{price}}</div>
			<div class="de-xiaoliang"><span>id:{{ids}}</span>|<span>库存300</span></div>
		</div>
		<!-- 商品详情 -->
		<div class="xaingqing">
			<van-tabs v-model="active" color="#000000" title-active-color="#000000" title-inactive-color="#999999">
				<van-tab title="商品详情">
					<div class="xqbj">
						<!-- <img src="../assets/images/xq.jpg" /> -->
						<div class="miaos">{{description}}</div>
					</div>
				</van-tab>
				<van-tab title="评论">
					<div class="plbox">
						<van-panel v-for="(item,index) in plArr" :key="index">
							<div slot=header>
								<div class="pinglun">
									<div class="pinglun-img"><img src="../assets/images/home/2023.png" /></div>
									<div class="pinglun-bt">
										<div class="nic">{{item.name}}</div>
										<div class="time">{{item.create_time}}<span></span></div>
									</div>
									<div class="pinglun-xing">
										<van-rate v-model="item.stars" readonly color="#ffd21e" />
									</div>
								</div>
							</div>
							<div slot="default" class="content">{{item.content}}</div>
						</van-panel>
					</div>
				</van-tab>
			</van-tabs>
		</div>
		<!--  -->
		<div>
			<van-goods-action>
				<van-goods-action-icon icon="cart-o" text="购物车" color="#000000" to="/about" />
				<div v-if="ts">
					
					<van-goods-action-icon icon="star" text="已收藏" color="#A7886C" @click="shoucang" />
				</div>
				<div v-else>
					<van-goods-action-icon icon="star" text="收藏" @click="shoucang" />
				</div>
			
				<van-goods-action-button type="info " text="加入购物车" color="#000000" @click='jiaruBtn' />
				<van-goods-action-button type="danger" text="立即购买" color="#A7886C" />
			</van-goods-action>
		</div>

		<!-- 底部弹框 -->
		<van-popup v-model="show" position="bottom" :style="{ height: '60%' }" class="pupoBox">
			<van-card :price="price2" :title="title" :thumb="image">
				<div slot=desc>库存:{{stock}}</div>
				<div slot=desc v-show="vshow">已选:{{tis}}</div>
			</van-card>
			<div class="guige">请选择规格：<br />
				<div v-for="(item,index) in guige" :key="index">
					<van-button plain color="#343434" @click="xuanz(item.id,index)" :class="{active:index===xiabiao}">{{item.title}}</van-button>
				</div>
			</div>
			<van-stepper v-model="value2" class="jinbuqi" />

			<van-button type="primary" block round color="#343434" @click="popuClick">确认加入购物车</van-button>
		</van-popup>
	</div>

</template>

<script>
	import {
		Icon
	} from 'vant';
	import {
		Swipe,
		SwipeItem,
	} from 'vant';
	import {
		Tab,
		Tabs
	} from 'vant';
	import {
		Panel
	} from 'vant';
	import {
		Rate
	} from 'vant';
	import {
		GoodsAction,
		GoodsActionIcon,
		GoodsActionButton,
		Toast,
		Popup,
		Button,
		Card,
		Stepper
	} from 'vant';
	export default {
		data() {
			return {
				active: 0,
				value: 3,
				idxsName:this.$route.params.id,
				price: '',
				price2: '',
				image: '',
				title: '',
				title2: '',
				description: null,
				ts: false,
				ids: '',
				show: false,
				value2: 1,
				guige: [],
				stock: 422,
				product_id: '',
				tis:'',
				vshow:false,
				xiabiao:null,
				wihi:'',
				// 评论数据
				Time: '',
				plContent: '',
				stars: '',
				plArr: [],
				titleName:JSON.parse(localStorage.getItem('globalData')).username

			}
		},
	  created() {
			this.getdeta()
			this.getComment()
			// 请求收藏的数据
	    	 this.$get(this.$API.PRODUCTS_WISHLIST,{
				userid: this.$store.state.nameId.userid
			}).then(res=>{
				console.log(res)
				for(let i=0;i<res.data.length;i++){
					if(res.data[i].product_id==this.idxsName){
						this.wihi=res.data[i].id
						this.ts=true
						
					}else{
						
						this.ts=false
					}
			   
				}
				
			
			})
			console.log(this.wihi)
		},
		watch: {
			value2(val) {
				console.log(val)
			}
		},
		mounted() {
			//页面挂载时记录缓存
			if(this.$store.state.nameId.userid){
				this.$get(this.$API.USERS_ADD_HISTORY, 
				{
				    	userId: this.$store.state.nameId.userid,
						productId: this.idxsName
				},
				).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			}
		},
		methods: {
			// 点击弹出规格
			jiaruBtn() {
				if( this.$store.state.nameId.userid==null){
					Toast('请先登录')
				}else{
					this.show = true;
					this.getdeta()
				}
			},
			// 点击按钮加入购物车
			popuClick() {
				// 如果没有选中规格不能让他加入购物车
				if(this.product_id==''){
					Toast({
					 message: '没有选中规格',
					 duration:700 
					});
				}else{
					this.getGO()
					
				}
			},
			//选择规格时	
			xuanz(val,index) {
				console.log(val)
				this.xiabiao=index
				console.log(this.xiabiao)
				for (let i = 0; i < this.guige.length; i++) {
					// 判断如果我遍历的数组的id等于等于我点击的那个值的id则执行
					if (this.guige[i].id == val) {
						this.title2 = this.guige[i].title
						this.price2 = this.guige[i].price
						this.stock = this.guige[i].stock
						this.product_id = val
						this.tis=this.guige[i].title
					}
				}
				console.log(this.product_id)
				this.vshow=true
			},
			getfanh() {
				this.$router.go(-1)
			},
			//详情数据请求
			getdeta() {
				this.$get(this.$API.PRODUCTS_INFO, 
				      {
						usersId: this.$store.state.nameId.userid,
						productId:this.idxsName
				      },
				).then(res => {
					console.log(res.data.favored)
					    this.title = res.data.product[0].title,
						this.image = res.data.product[0].image,
						this.price = res.data.product[0].price,
						this.description = res.data.product[0].description
					    this.ids = res.data.product[0].id
					    this.guige = res.data.skus,
					console.log(this.guige)

					for(let i=0;i<res.data.length;i++){
						console.log(res.data[i])
					}
			
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			// 加入购物车数据请求
			getGO() {
				this.$get(this.$API.CART_ADDITEM,
				{
						userId: this.$store.state.nameId.userid,
						productskuId: this.product_id,
						quantity:this.value2
					}
				).then(res => {
					console.log(res)
					if(res.status==200){
						Toast.success({
						 message: '加入购物车成功',
						 duration:700 
						});
						this.show = false;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 收藏
			shoucang() {
				// this.ts=!this.ts
			
		  	if(this.ts==false){
					console.log('收藏')
			     this.$get(this.$API.PRODUCTS_ADD_WISHLIST,
					    {
							userid: this.$store.state.nameId.userid,
							productid:this.idxsName
						}
					).then(res => {
						console.log(res)
							this.ts =true
							this.$router.go(0)
					}).catch(err => {
						console.log(err)
					})
					console.log(this.ts)
				}else{
					console.log('取消收藏')
					console.log(this.wihi)
						this.$get(this.$API.PRODUCTS_REMOVE_WISHLIST,
							{
								userId: this.$store.state.nameId.userid,
								wishlisId:this.wihi
							}
						).then(res => {
							console.log(res)
							this.ts =false
							// this.objArr.splice(index, 1)
						})
					}
				
				
			},
			// 评价
			getComment() {
				this.$get(this.$API.COMMENTS_LIST, 
				      {
						productId: this.idxsName
					   }
				).then(res => {
					console.log(res.data)
					for (let i = 0; i < res.data.length; i++) {
						this.plArr.push(res.data[i])
					}
				}).catch(err => {
					console.log(err)
				})
			}



		},

		components: {
			[Icon.name]: Icon,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[GoodsAction.name]: GoodsAction,
			[GoodsActionIcon.name]: GoodsActionIcon,
			[GoodsActionButton.name]: GoodsActionButton,
			[Panel.name]: Panel,
			[Rate.name]: Rate,
			[Toast.name]: Toast,
			[Popup.name]: Popup,
			[Button.name]: Button,
			[Card.name]: Card,
			[Stepper.name]: Stepper,
		}
	}
</script>

<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;
	@padding: 5px 15px;

	#detalis {
		background-color: #fcfcfc;
	}
  .active{
		 background-color: #343434;
		 color: #ffffff !important;
	 }
	.header {
		width: @width ;
		height: 40px;
		display: @display;
		align-items: center;
		justify-content: space-between;
		padding: 0px 20px;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		color: #343434;
		background-color: #ffffff;
	}

	.van-swipe {
		width: 100vw;
		height: 100vw;

		>img {
			width: 100%;
			height: 100%;
		}
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		// background-color: #39a9ed;
	}

	.de-guige {
		width: @width;
		height: 110px;
		background-color: #ffffff;

		.de-biaoti {
			font-size: 18px;
			font-weight: bold;
			font-family: '黑体';
			padding: @padding;
		}

		.de-jiage {
			font-size: 18px;
			color: #A8896D;
			padding: @padding;
		}

		.de-xiaoliang {
			font-size: 10px;
			color: #999999;
			padding: 5px;

			>span {
				display: inline-block;
				margin: 5px 10px;
			}
		}
	}

	.xaingqing {
		width: @width;
		margin-top: 10px;
		padding-bottom: 20px;

		.xqbj {
			width: 100vw;
			height: auto;

			img {
				width: 100%;
				height: 100%;
			}

			.miaos {
				text-align: center;
				margin-top: 20px;
				padding-bottom: 50px;
			}
		}
	}

	.plbox {
		padding-bottom: 150px;
		background-color: white;

		.pinglun {
			width: @width;
			height: 80px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-top: 10px;

			.pinglun-img {
				flex: 1;
				text-align: center;

				img {
					width: 50px;
					height: 50px;
					border-radius: 50%;
				}

			}

			.pinglun-bt {
				flex: 2;

				.nic {
					font-size: 15px;
					font-weight: bold;
				}

				.time {
					font-size: 12px;
					color: #999999;
					margin-top: 5px;

					span {
						margin-left: 5px;
					}
				}
			}

			.pinglun-xing {
				flex: 2;
			}
		}
	}

	.content {
		width: 90vw;
		margin: 0 auto;
		padding-bottom: 20px;
		font-size: 14px;
	}

	.van-goods-action {
		bottom: 4vw !important;
		width: 90vw;
		border-radius: 50px;
		left: 50%;
		margin-left: -45vw;
		box-shadow: 0px 0px 5px #cccccc;
		padding-left: 18px;
		box-sizing: border-box;
	}

	// 弹窗
	.pupoBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10px 22px;
		box-sizing: border-box;

		.jinbuqi {
			text-align: right;
		}

		.guige {
			>div {
				display: inline-block;

				.van-button {
					width: 85px;
					height: 35px;
					margin-right: 10px;
					margin-top: 10px;
					font-size: 12px;
				}
			}


		}

	}

	active {
		background-color: #343434;
		color: white;
	}
</style>